<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<jsp:include page="/WEB-INF/jsp/inc/include-easyUI.jsp"></jsp:include>
	<!-- 弹出框 -->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.css">
	<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.min.js"></script>
	
	<script src="${pageContext.request.contextPath}/static/plugins/js/outlook2.js" type="text/javascript"></script>
	<!-- 表单验证 -->
	<!--     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/css/bootstrap.css"/> -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/js/bootstrapValidator.js"></script>
	
	<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>
	<!-- 时间选择器 -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/skin/jedate.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/jedate.js"></script>
    
<script type="text/javascript">
	$(function() {
		$('#addItemInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				name : {
					message : '名称不能为空',
					validators : {
						notEmpty : {
							message : '名称不能为空'
						},
					}
				},
			}
		});
// 		$('#reset_addItemInfo').click(function() {
// 			$('#addItemInfoForm').data('bootstrapValidator').resetForm(true);
// 		});
		$('#editTypeInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				name : {
					message : '名称不能为空',
					validators : {
						notEmpty : {
							message : '名称不能为空'
						},
					}
				},
			}
		});
// 		$('#reset_editItemInfo').click(function() {
// 			$('#editTypeInfoForm').data('bootstrapValidator').resetForm(true);
// 		});
		$('#vss').click(function() {
			$('#addItemInfoForm').bootstrapValidator('validate');
		});
	});
</script>
</head>
<body>

	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
 				try { 
 					ace.settings.check('breadcrumbs', 'fixed') 
 				} catch (e) { 
 				} 
			</script> 
			<ul class="breadcrumb">
				<li class="active">消费项目管理</li>
			</ul>
		</div>
		<div class="page-content">
			
			<div id="content" region="center" title="消费项目信息" style="overflow: hidden">
			</div>
			<table id="userList" border="false" width="100%" height="450px">
			</table>
			
			<!-- 创建消费项目 -->
			<div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemModalLabel">
				<div class="modal-dialog" role="document" style="margin:150px 450px">
					<div class="modal-content">
						<form id="addItemInfoForm" class="form-horizontal" method="post"
								role="form" style="margin: 0px;">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_addItemInfo">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="addItemModalLabel">消费项目信息</h4>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="add-item-name"> 名称：</label>
									<div class="col-sm-8">
										<input type="text" name="name" id="add-item-name" placeholder="名称" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
							</div>
							<div class="modal-footer">
								<div class="col-lg-6 col-lg-offset-5">
									<button type="button" class="btn btn-default" id="reset_addItemInfo" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="submit_addItemInfo">确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- 编辑消费项目 -->
			<div class="modal fade" id="editItemModal" tabindex="-1" role="dialog" aria-labelledby="editItemModalLabel">
				<div class="modal-dialog" role="document" style="margin:150px 450px">
					<div class="modal-content">
						<form id="editTypeInfoForm" class="form-horizontal" method="post"
								role="form" style="margin: 0px;">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_editItemInfo">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="editItemModalLabel">消费项目信息</h4>
							</div>
							<div class="modal-body">
								<input type="hidden" name="id" id="edit-item-id"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-item-name"> 名称：</label>
									<div class="col-sm-8">
										<input type="text" name="name" id="edit-item-name" placeholder="名称" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
							</div>
							<div class="modal-footer">
								<div class="col-lg-6 col-lg-offset-5">
									<button type="button" class="btn btn-default" id="reset_editItemInfo" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="submit_editItemInfo">确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
<script type="text/javascript">
		var consumeItemGrid;
        $(function () {
            consumeItemGrid = $("#userList").datagrid({
                url: '${pageContext.request.contextPath}/admin/consumeItem/getList',
                rownumbers: true,
                fitColumns:true,
                idField: 'id',
                pageSize: 10,
                pagination: true,
                pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                onLoadError:function(data){
                },
                frozenColumns: [[{
                    title: 'id',
                    field: 'id',
                    width: 50,
                    checkbox: true
                }]],
                columns: [[ {
                    field: 'name',
                    title: '类型名称',
                    width: 100,
                    sortable: true
                }, {
                    field: 'createDate',
                    title: '创建时间',
                    width: 100
                }
                ]],

                toolbar: [
                {
                    text: '创建',
                    iconCls: 'icon-add',
                    handler: function () {
                     createUser();
                    }
                }, 
                /* '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteUser();
                    }
                }, */ 
                '-', {
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        editItem();
                    }
                }, '-', {
                    text: '取消选中',
                    iconCls: 'icon-undo',
                    handler: function () {
                        consumeItemGrid.datagrid('unselectAll');
                    }
                }]
            });
        });
     
        function reloadDataGrid() {
            consumeItemGrid.datagrid('clearChecked');
            consumeItemGrid.datagrid('reload');
        }

		$('#addItemModal').on('hide.bs.modal', function () {
			$('#addItemInfoForm').data('bootstrapValidator').resetForm(true);
		});
		
		function createUser() {
			$('#addItemModal').modal('show');
		}
		
		$('#submit_addItemInfo').click(function(){
			var f = $('#addItemInfoForm');
			f.data('bootstrapValidator').validate();
			var isValid = f.data('bootstrapValidator').isValid();
			if(!isValid){
				return false;
			}
			var toUrl='${pageContext.request.contextPath}/admin/consumeItem/create';
			var f = $('#addItemInfoForm');
				f.form('submit', {
				    url: toUrl,
				    onsubmit: function () {
				        var flag = $(this).form('validate');
				        if (flag) {
				            top.showProcess(true, '温馨提示', '正在提交数据...');
				        }
				        return flag;
				    },
				    success: function (data) {
				        var map = $.parseJSON(data);
				        if (map.success) {
				        	$('#addItemModal').modal('hide');
				            top.showMsg('提示', map.msg);
				            reloadDataGrid();
				        } else {
				        	top.alertMsg('错误', map.msg);
				        }
				    },
				    onLoadError: function () {
				        top.showProcess(false);
				        top.$.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
				    }
				});
		});
		
		function deleteUser() {
			var ids = [];
			var rows = consumeItemGrid.datagrid('getSelections');
			if (rows.length > 0) {
				swal({
					title : "你是否确定删除？",
					text : '',
					type : "warning",
					showCancelButton : true,
					confirmButtonColor : "#DD6B55",
					confirmButtonText : "删除",
					cancelButtonText : "取消",
					closeOnConfirm : false,
// 					closeOnCancel : false
				},
				function(isConfirm) {
					if (isConfirm) {
						for ( var i = 0; i < rows.length; i++) {
							ids.push(rows[i].id);
						}
						$.ajax({
							url : '${pageContext.request.contextPath}/admin/consumeItem/delete',
							data : {
								ids : ids.join(',')
							},
							cache : false,
							dataType : "json",
							success : function(data) {
								if (data.success) {
									swal("删除成功","","success");
									reloadDataGrid();
								} else {
									swal("删除失败", data.obj,"error");
								}
							}
						});
					} 
				});
			} else {
				top.showMsg("提示", "请选择要删除的消费项目！");
			}
		}
		
		//编辑消费项目
		$('#editItemModal').on('hide.bs.modal', function () {
			$('#editTypeInfoForm').data('bootstrapValidator').resetForm(true);
		});
		
		function editItem() {
			var rows = consumeItemGrid.datagrid('getSelections');
			if (rows.length > 0) {
				if (rows.length == 1) {
					//弹出编辑框
					$('#edit-item-id').val(rows[0].id)
					$('#edit-item-name').val(rows[0].name);
					$('#editItemModal').modal('show');
				} else {
					top.showMsg("提示", '只能选择一个消费项目进行编辑！');
				}
			} else {
				top.showMsg("提示", "请选择要编辑的消费项目！");
			}
		}
		
		$('#submit_editItemInfo').click(function(){
			var f = $('#editTypeInfoForm');
			f.data('bootstrapValidator').validate();
			var isValid = f.data('bootstrapValidator').isValid();
			if(!isValid){
				return false;
			}
			var id = $('#edit-item-id').val()
			var name = $('#edit-item-name').val();
			var toUrl = '${pageContext.request.contextPath}/admin/consumeItem/edit';
			$.post(toUrl, 
					{
						id : id,
						name : name
					},
					function(data){
						top.showProcess(false);
						if (data.success) {
							$('#editItemModal').modal('hide');
							top.showMsg('提示', data.msg);
							reloadDataGrid();
						} else {
							top.alertMsg('警告', data.msg);
						}
			});
			
		});
		
	</script>	
  </body>
</html>
